<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-13 15:00:05
 * @FilePath: \aster-flowable-uniapp\src\pages\tabbar\user.vue
 * @Description: 我的
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <view class="box-sizing-b wh-full-vh bg-drak">
    <view class="user-container">
      <view class="header" @click="toUserInfo()">
        <view class="avatar-wrap">
          <img :src="getAvatar" class="avatar" alt="" />
        </view>
        <view class="info-wrap">
          <view class="nickname">{{ _name }}</view>
          <view class="wechat-id">{{ userInfo.mobile || '' }}</view>
        </view>
      </view>
    </view>
    <view class="list-group">
      <view class="menu-list">
        <view class="menu-item no-bottom-border" @click="toUserInfo()">
          <icon-font class="menu-icon-left" size="40rpx" name="icon-geren" color="#A1DEFF" />
          <text class="menu-text">个人信息</text>
          <icon-font size="36rpx" class="menu-icon-right" name="icon-xiangyou" color="#9C9C9D" />
        </view>
      </view>
    </view>
    <view class="list-group">
      <view class="menu-list">
        <view class="menu-item" @click="toUseTip()">
          <icon-font class="menu-icon-left" size="36rpx" name="icon-jibenxinxi" color="#AEA1FF" />
          <text class="menu-text">用户协议</text>
          <icon-font size="34rpx" class="menu-icon-right" name="icon-gengduo9" color="#9C9C9D" />
        </view>
        <view class="menu-item" @click="toPrivatePolicy()">
          <icon-font
            class="menu-icon-left"
            size="36rpx"
            name="icon-shenqingquanxian"
            color="#FFA1CB"
          />
          <text class="menu-text">隐私政策</text>
          <icon-font size="34rpx" class="menu-icon-right" name="icon-gengduo9" color="#9C9C9D" />
        </view>
      </view>
    </view>
    <view class="list-group">
      <view class="menu-list">
        <view class="menu-item no-bottom-border" @click="toLogout()">
          <icon-font class="menu-icon-left" size="40rpx" name="icon-tuichu" color="#A1DEFF" />
          <text class="menu-text">退出登录</text>
          <icon-font size="36rpx" class="menu-icon-right" name="icon-xiangyou" color="#9C9C9D" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import IconFont from '@/components/Icon/icon-font.vue';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { isNotEmpty } from '@/utils/is';
  import { logoutApi } from '@/api/login';
  import { Modal } from '@/utils/uniapi/prompt';

  // 当前用户信息
  const userStore = useUserStore();
  // 用户信息
  const userInfo = computed(() => userStore.getUserInfo());
  // 用户名
  const _name = computed(() => {
    return userInfo.value.realName ? userInfo.value.realName : userInfo.value.nickName;
  });

  /**
   * @description: 获取头像URL
   * @return {*}
   */
  const getAvatar = computed(() => {
    if (userInfo.value.avatar && isNotEmpty(userInfo.value.avatar)) {
      return userInfo.value.avatar;
    } else {
      return generateAvatarBase64(_name.value);
    }
  });

  /**
   * @description: 生成头像
   * @param {string} str
   * @return {*}
   */
  function generateAvatarBase64(str) {
    const firstChar = str.charAt(0) || '?'; // 处理空字符串情况
    const canvas = document.createElement('canvas');
    const size = 100;
    canvas.width = size;
    canvas.height = size;
    const ctx: any = canvas.getContext('2d');

    // 绘制背景
    ctx.fillStyle = '#1989FA';
    ctx.fillRect(0, 0, size, size);

    // 设置文字样式
    ctx.fillStyle = '#fff';
    ctx.font = '60px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 绘制字符
    ctx.fillText(firstChar, size / 2, size / 2);

    // 返回Base64编码的Data URL
    return canvas.toDataURL();
  }

  /**
   * 个人信息
   */
  const toUserInfo = () => {
    router.push(config.route.user_info + '?id=' + userInfo.value.id);
  };

  /**
   * 跳转用户协议
   */
  const toUseTip = () => {
    router.push(config.route.register_agreement);
  };

  /**
   * 跳转隐私政策
   */
  const toPrivatePolicy = () => {
    router.push(config.route.privacy_policy);
  };

  /**
   * 退出登录
   */
  const toLogout = () => {
    Modal({
      title: '提示',
      content: '您确定要退出登录吗？',
    }).then(async () => {
      // 1.执行退出登录接口
      await logoutApi();

      // 2.清除 Token
      userStore.removeToken();

      // 3.重定向到登陆页
      router.replace(config.route.login);
    });
  };
</script>

<style lang="scss" scoped>
  uni-page-body {
    background: #f7f7f7 !important;
  }

  .user-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    margin-bottom: 16rpx;
  }
  .header {
    margin-top: 20rpx;
    width: 100%;
    height: 260rpx;
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-radius: 20rpx;
  }

  .avatar-wrap {
    width: 105rpx;
    height: 105rpx;
    margin-right: 25rpx;
    border-radius: 50%;
  }

  .avatar {
    width: 100%;
    height: 100%;
  }

  .info-wrap {
    flex: 1;
  }

  .nickname {
    font-size: 34rpx;
    margin-bottom: 10rpx;
  }
  .wechat-id {
    color: grey;
    font-size: 28rpx;
  }

  .list-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    background-color: #ffffff;
    margin-bottom: 16rpx;
  }

  .menu-list {
    display: flex;
    flex-direction: column;
    row-gap: 20rpx;
    margin: 10rpx 0;
  }

  .menu-item {
    display: flex;
    height: 100rpx;
    align-items: center;
    border-bottom: 1rpx solid #f5f5f5;
  }
  .no-bottom-border {
    border-bottom: none;
  }

  .menu-icon-left {
    margin-right: 10rpx;
    font-size: 10rpx;
  }
  .menu-text {
    font-size: 32rpx;
    margin-left: 14rpx;
  }

  .menu-icon-right {
    width: 40rpx;
    line-height: 100%;
    height: 40rpx;
    margin-left: auto;
    color: #999999;
  }
</style>
